<template>
  <div>
    <Portal to="right-disable"
            :disabled="!queryModelDefaultSetting.showSetting">
      <el-form :inline="true">
        <el-form-item v-loading='loading'>
          <el-tooltip :open-delay="1000" effect="dark" :content="lastTime" placement="top-end">
            <ejs-chiplist id="chip-filter" selection="Multiple" :selectedChips='choiceSelected' @click="changeChips">
              <e-chips>
                <e-chip :text="gadgetSetting.btnName" :cssClass="gadgetSetting.cssClass"></e-chip>
              </e-chips>
            </ejs-chiplist>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"/>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import moment from 'moment'
import { defaultGadgetSettingList } from '@/utils/data-json'
export default {
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: this.pageId
      },
      loading: false,
      choiceSelected: true,
      autoRefresh: false,
      gadgetStatus: 'init',
      timer: null,
      gadgetSetting: {},
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'autorefreshgadget',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'autorefreshgadget' }).gadgetSetting
          // gadgetSetting: {
          //   time: 15,
          //   btnName: 'Auto Refresh',
          //   cssClass: 'e-info '
          // }
        }
      },
      lastTime: 'Not Synched'
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.subscribeMessage('GadgetsReady', this.runReport)
    this.$store.state.isWidget = false
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  watch: {
    autoRefresh (val) {
      if (val) {
        this.runReport()
        this.timer = setInterval(() => {
          this.runReport()
        }, this.gadgetSetting.time * 1000)
      } else {
        clearInterval(this.timer)
      }
    }
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },

    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      const params = {
        // businessId: this.pageId,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        gadgetId: this.id,
        includeSql: false
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
        if (res.data) {
          _self._.merge(_self.gadgetSetting, res.data.gadgetSetting)
        }
        _self.updateGadgetStatus('ready') //! IMPORTANT must have this code in every gadget
        _self.loading = false
      })
    },
    runReport () {
      this.lastTime = this.$t('custom.dashboard.layoutItem.autorefreshlastupdate') + moment().format('YYYY-MM-DD HH:mm:ss')
      this.publishMessage('runReport')
    },
    changeChips (e) {
      if (e.selected) {
        this.autoRefresh = e.selected
      } else {
        this.autoRefresh = false
      }
    }
  }
}
</script>
<style scoped>

</style>
